<template>
  <div class="not-found">
    <h1>404</h1>
    <h2>页面未找到</h2>
    <p>您访问的页面不存在或已被移除。</p>
    <p v-if="roleId !== null">用户角色 ID: {{ roleId }}</p>
    <router-link to="/homeview">返回首页</router-link>
    <router-link to="/">返回后台管理</router-link>
  </div>
</template>

<script>
import { useUserStore } from "@/store/useUserStore.ts"; // 确保正确引入
import { computed, onMounted, ref } from "vue";
import { getRolebyUser } from "@/api/userApi.ts";

const userStore = useUserStore();

export default {
  name: 'FrontendNotFound',
  setup() {
    const roleId = ref(null); // 用于存储角色 ID

    // 获取用户信息
    const userInfo = computed(() => userStore.userInfo);

    onMounted(async () => {
      if (userInfo.value && userInfo.value.id) { // 检查用户信息是否有效
        try {
          // 调用 API 获取用户角色, 传入用户 ID
          const response = await getRolebyUser(userInfo.value.id);

          if (response && response.data) {
            roleId.value = response.data; // 假设返回的数据结构是 { data: roleId }
          } else {
            console.error("未获取到有效的角色 ID:", response);
          }
        } catch (error) {
          console.error("获取角色失败:", error);
        }
      } else {
        console.warn("用户信息无效，无法获取角色 ID.");
      }
    });

    return {
      roleId
    };
  }
}
</script>

<style scoped>
.not-found {
  text-align: center;
  margin-top: 100px;
}

.not-found h1 {
  font-size: 50px;
  color: #f00;
}

.not-found h2 {
  font-size: 24px;
}
</style>
